<script type="text/javascript">
    Ext.require(['*']);

    Ext.onReady(function() {

        Ext.QuickTips.init();
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

        var north = new Ext.Component({
            region: 'north',
            height: 32, // give north and south regions a height
            autoEl: {
                tag: 'div',
                html:'<p>note books</p>'
            }
        });

        var west = {
            region: 'west',
            id: 'west-panel', // see Ext.getCmp() below
            title: 'West',
            split: true,
            width: 200,
            minWidth: 175,
            maxWidth: 400,
            collapsible: true,
            animCollapse: true,
            margins: '0 0 0 5',
            layout: 'accordion',
            items: [{
                contentEl: 'west',
                title: 'Navigation',
                iconCls: 'nav' // see the HEAD section for style used
            }]
        };

        var center = new Ext.tab.TabPanel({
            region: 'center', // a center region is ALWAYS required for border layout
            deferredRender: false,
            activeTab: 0,     // first tab initially active
            items: [{
                contentEl: 'center1',
                title: 'Close Me',
                closable: true,
                autoScroll: true
            }, {
                contentEl: 'center2',
                title: 'Center Panel',
                autoScroll: true
            }]
        });

        new Ext.Viewport({
            id: 'border-example',
            layout: 'border',
            items: [north, west, center]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it
        Ext.get("hideit").on('click', function(){
            // get a reference to the Panel that was created with id = 'west-panel'
            var w = Ext.getCmp('west-panel');
            // expand or collapse that Panel based on its collapsed property state
            w.collapsed ? w.expand() : w.collapse();
        });
    });
    </script>
</head>
<body>
    <!-- use class="x-hide-display" to prevent a brief flicker of the content -->
    <div id="west" class="x-hide-display">

        <p>Hi. I'm the west panel.</p>
    </div>
    <div id="center2" class="x-hide-display">
    </div>
    <div id="center1" class="x-hide-display">
    </div>
    <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
    </div>
    <div id="south" class="x-hide-display">
    </div>